<template>
	<!-- 料列表、详情专用视频缩略图 -->
	<view class="root" :style="{width,height}" v-if="article">
		<image :style="{width,height}" class="posterImg" :src="posterUrl" :mode="mode" @error="imageError" @load="imageLoad" v-show="!isError"></image>
		<image :style="{width,height}" class="posterImg" src="@/public/images/public/error.png" mode="aspectFill" v-show="isError"></image>
		<view :style="{width,height}" class="box">
			<image v-if="!lock" :style="'width:'+buttonWidth" src="@/public/images/public/bfj.png" mode="widthFix"></image>
			<image v-else :style="'width:'+buttonWidth" src="@/public/images/public/sps.png" mode="widthFix"></image>
		</view>
	</view>
	<!-- 支持视频播放 -->
	<view class="root" :style="{width,height}" style="min-width: 300rpx; max-width: 500rpx;min-height:200rpx;" v-else>
		<image :style="{width,height}" style="min-width: 300rpx; max-width: 500rpx;min-height:200rpx;" class="posterImg" :src="posterUrl" mode="widthFix"></image>
		<view :style="{width,height}" style="min-width: 300rpx; max-width: 500rpx;min-height:200rpx;" @click="state=!state" class="box">
			<image :style="'width:'+buttonWidth" src="@/public/images/public/bfj.png" mode="widthFix"></image>
		</view>
		<video :id="videoId" :style="{height,width:state?'750rpx':'1rpx'}" @pause="state=0" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange" class="video" :src="url"></video>
	</view>
</template>

<script>
	/**
	 * FullVideo 视频缩略图与播放组件
	 * @description 用于列表视频缩略图展示
	 * @property {String} poster 缩略图片
	 * @property {String} url 视频地址
	 * @property {Boolean} lock 是否显示禁止播放图标
	 * @property {Number} direction 视频方向
	 * @property {Boolean} article 是否在料列表或详情展示
	 * @property {String} width 视频宽度
	 * @property {String} height 视频高度
	 * @example <FullVideo :url="videoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
	 */
	export default {
		name: "FullVideo",
		props: {
			poster: {
				type: String,
				default: ''
			},
			url: {
				type: String,
				default: ''
			},
			lock: {
				type: Boolean,
				default: false
			},
			direction: {
				type: Number,
				default: 0
			},
			article: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: "750rpx"
			},
			height: {
				type: String,
				default: "1rpx"
			},
			buttonWidth: {
				type: String,
				default: "100rpx"
			}
		},
		data() {
			return {
				VideoContext: {}, //视频上下文对象
				state: false, //播放状态
				currentTime: 0, //当前时间
				duration: 0, //时长
				videoId: '', //视频ID
				imageWidth: 670, //缩略图宽度
				imageHeight: 376, //缩略图高度
				isError: false //加载失败
			};
		},
		watch: {
			state(state, oldValue) {
				console.log(state,oldValue)
				if(!state){
					this.VideoContext.pause()
				}else{
					if(!this.isError){
						this.VideoContext.play()
						setTimeout(()=>{
							this.VideoContext.requestFullScreen({direction:this.direction})
						},10)
					}else{
						uni.showToast({
							title: '当前视频无法播放',
							icon: 'none'
						})
					}
				}
			}
		},
		computed:{
			posterUrl(){
				if(this.poster){
					return this.poster
				}
				return this.url + '?vframe/jpg/offset/1'
			},
			mode(){
				if(this.poster){
					return 'aspectFill'
				}else{
					return 'aspectFit'
				}
			}
			
		},
		created() {
			this.videoId = Date.now() + Math.ceil(Math.random()*10000000)+"";
		},
		mounted() {
			this.VideoContext = uni.createVideoContext(this.videoId)
		},
		methods:{
			fullscreenchange(e){
				console.log(e.detail.fullScreen);
				this.state = e.detail.fullScreen
			},
			timeupdate(e){
				console.log(e.detail);
				this.duration = e.detail.duration
				this.currentTime = e.detail.currentTime
			},
			imageError() {
				this.isError = true
			},
			imageLoad() {
				this.isError = false
			},
			videoError() {
				this.isError = true
			},
			videoLoad() {
				this.isError = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.root{
	position:relative;
	width: 670rpx;
	height: 376rpx;
	overflow: hidden;
	background-color: #14161A;
	background-size: 100%;
	border-radius: 10rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.posterImg,.video,.box{
	display: flex;
	width: 670rpx;
	height: 376rpx;
	position: absolute;
}
.video{
	margin-left: -2000px;
}
.posterImg{
	border-radius: 10rpx;
}
.box{
	justify-content: center;
	align-items: center;
}
</style>
